import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import './index.less';
import 'react-quill/dist/quill.snow.css';

interface QuillProps {
  defaultValue?: string;
  onGet: (value: string) => void;
}

function MyComponent({ defaultValue, onGet }: QuillProps) {
  const [value, setValue] = useState(defaultValue || '');
  const modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
      ['link', 'image'],
      ['clean'],
    ],
  };

  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'bullet', 'indent',
    'link', 'image',
  ];

  return (
    <ReactQuill
      theme="snow"
      value={value}
      onChange={(content) => {
        setValue(content);
        onGet && onGet(content);
      }}
      modules={modules}
      formats={formats}
    />
  );
}

export default MyComponent;
